import React, { PureComponent } from 'react';
import { BackHandler, StyleSheet, Text, ToastAndroid, TouchableWithoutFeedback, View } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
import Popup from '../components/popup/popup';
import LoginPage from './login';

export default class Root extends PureComponent {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        // if (Platform.OS === 'android') {
        //     BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
        // }
    };

    componentWillUnmount() {
        // if (Platform.OS === 'android') {
        //     BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid)
        // }
        Popup.destroyAllSibling();
    }

    onBackAndroid = () => {
        //禁用返回键
        if (this.props.navigation.isFocused()) {//判断   该页面是否处于聚焦状态
            if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
                //最近2秒内按过back键，可以退出应用。
                // return false;
                BackHandler.exitApp();//直接退出APP
            } else {
                this.lastBackPressed = Date.now();
                ToastAndroid.show('再按一次退出应用', 1000);//提示
                return true;
            }
        }
    };

    renderDefaultRoute = (route, key) => {

        const {
            navigation: {
                state,
            },
            onTabPress,
            tabStyle,
            getLabelText,
            activeTintColor,
            inactiveTintColor,
            allowFontScaling,
            labelStyle,
        } = this.props;

        const color = key === state.index ? activeTintColor : inactiveTintColor;

        return (
            <TouchableWithoutFeedback
                onPress={() => onTabPress({ route: route })}
            >
                <View style={[styles.tabItem, { height: tabStyle.height }]}>
                    <Text allowFontScaling={allowFontScaling}
                          style={[
                              labelStyle,
                              { color },
                          ]}>
                        {getLabelText({ route: route })}
                    </Text>
                </View>
            </TouchableWithoutFeedback>
        );
    };

    render() {
        const {
            navigation: {
                state: {
                    routes,
                },
            },
            tabStyle,
            style,
        } = this.props;

        return (
            <SafeAreaView style={{ backgroundColor: '#000' }}>
                <View style={[styles.tabContainer, tabStyle, style]}>
                    {this.renderDefaultRoute(routes[0], 0)}
                    <TouchableWithoutFeedback
                        onPress={() => {
                            Popup.show(
                                <LoginPage/>,
                            );
                        }}
                    >
                        <View style={
                            [
                                styles.tabCenter,
                            ]
                        }>
                            <Text>+</Text>
                        </View>
                    </TouchableWithoutFeedback>
                    {this.renderDefaultRoute(routes[1], 1)}
                </View>
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    tabContainer: {
        flexDirection: 'row',
    },
    tabItem: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabCenter: {
        alignSelf: 'center',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: 45,
        height: 35,
        backgroundColor: '#fff',
        textAlign: 'center',
        borderRadius: 12,
    },
});
